<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1">
<title>支付</title>
<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css?v=12" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript"
	src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js?v=5"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js?v=5"></script>
<c:if test="${not empty message }">
	<script type="text/javascript">
				alert("${message}");
			</script>
</c:if>
<script type="text/javascript">
		function onBridgeReady(){
			   WeixinJSBridge.invoke(
			      'getBrandWCPayRequest', ${JSAPI},
			      function(res){
				      if(res.err_msg == "get_brand_wcpay_request:ok" ){
				      // 使用以上方式判断前端返回,微信团队郑重提示：
				      		alert("支付成功，将自动跳转到用户中心");
				            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				            location.href = "${ctxFront }/jiujiudevice/usercenter";

				      } 
				   }); 
			}
	</script>
</head>

<body style="background: #f6f6f6;" v-cloak>
   <div id="app">
		<div class="p-top">
			<p class="p-title h2" style="border-bottom: 1px #eee solid;font-size: 16px;padding-bottom: 6px;">消费结算</p>
			<div>				
				<!--<div class="p-desc">
					<p>开始时间 2018年5月25日 15:25:25</p>
					<p>结束时间 2018年5月25日 16:25:25</p>
				</div>-->
				<div class="box flex-between" style="text-align: center; padding: 5px 0;">
					<div class="p-desc">
						<p>设备单价：<span style="color: #333;">{{devicePrice | numFilter}}元/分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>使用时长：<span style="color: #333;">{{deviceUseTime}}分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>设备费用：<span style="color:red;">{{deviceAmount |  numFilter}}元</span> </p>
						
					</div>
				</div>
				
				<div class="box flex-between" v-if='otherMessage' style="text-align: center;border-top: 1px #EEEEEE dashed;padding: 5px 0;" v-for="(items,index) in otherMessage">
					
					<div class="p-desc">
						<p>{{items.name}}单价：<span style="color: #333;">{{items.price | numFilter}}元/分钟</span></p>
						

					</div>
					<div class="p-desc">
						<p>使用时长：<span style="color: #333;">{{deviceUseTime}}分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>{{items.name}}费用：<span style="color: red;">{{items.value | numFilter}}元</span></p>
						
					</div>
				</div>
				<c:if test="${deviceType == 1 }">
				<div class="box flex-between" style="text-align: center;border-top: 1px #EEEEEE dashed;padding: 5px 0;">
					<div class="p-desc">
						<p>墨盒费用：</p>
						

					</div>
					<div class="p-desc">
<!-- 						<p>使用时长：<span style="color: #333;">10分钟</span></p>
 -->						
					</div>
					<div class="p-desc">
						<p><span style="color:red ;">{{inkMoney | numFilter}}元</span></p>
						
					</div>
				</div>
				</c:if>

			</div>
			<p class="p-moeny h2"><span>共计</span> <span>{{amount | numFilter}}元</span></p>
		</div>
	 </div>
	
		<div class="p-top" style="margin-top: 10px;padding-top: 8px;" id="inkDetail">
				<p class="p-title box flex-between">
					<span>墨盒数据</span>
					<span><i style="color: #12BB73">查看详情</i></span>
				</p>
				<div id="deviceContent">				
			</div>				
		</div>	
		<div style="margin: 30% 5% 0 5%; text-align: center;">
			<p class="desc">点击去支付，即表示同意<i style="color: #00DA81;" onclick="$('.fade').show()">《服务协议》</i></p>
			<button class="btn-login" onclick="onBridgeReady()">去支付</button>
		</div>
		<div class="fade" style="display: none;">
		<div class="section3">
			<span onclick="$('.fade').hide()"
				style="position: fixed; top: 20px; right: 5px;"> <img
				src="${ctxStatic}/jiujiudevice/img/close.png" width="24px">
			</span>
			
			<!-- 用户协议 -->
			${jiuUserAgree.content}
			<!-- <p style="text-align: center; font-size: 16px;">《用户协议》</p>
			<p style="font-weight: bold;">服务条款</p>

			<p style="text-indent: 2em;">与用户共同确认：</p>
			<p style="text-indent: 2em;">1.
				用户点击注册页面的同意注册按钮并完成注册程序、获账号和密码时，视为用户与已达成《用户协议》，就用户进入（即用户通过与商家进行家庭服务交易）达成本协议的全部约定。</p>
			<p style="text-indent: 2em;">2.
				用户均已认真阅读本《用户协议》(下称“本协议”)中全部条款（特别是以黑体字标示出的关于及用户重大权益的条款）及发布的其他全部服务条款和操作规则的内容，对本协议及前述服务条款和规则均以知晓、理解并接受，同意将其作为确定双方权利义务的依据。《法律声明》为本协议的必要组成部分，用户接受本协议的同时即视为接受《法律声明》的全部内容。
			</p>

			本协议于用户点击注册并完册程序、获得账号和密码时生效，对和用户均具有约束力。 -->
		</div>
	</div>
	</div>
	
		<script type="text/javascript">
		   var app = new Vue({
			  el: '#app',
			  data: {
				  otherMessage: ${orderLog.otherMessage},
				  devicePrice:'${orderLog.devicePrice }',
				  deviceUseTime: '${orderLog.deviceUseMin }',
				  deviceAmount: '${orderLog.deviceAmount }',
				  inkMoney: '${orderLog.inkMoney }',
				  amount: '${order.amount }'
				  
			  },
			 filters: {
					  numFilter:function(val){

					   val = val.toString().replace(/\$|\,/g,'');
				    if(isNaN(val)) {
				        val = "0";  
				      } 
				      let sign = (val == (val = Math.abs(val)));
				      val = Math.floor(val*100+0.50000000001);
				      let cents = val%100;
				      val = Math.floor(val/100).toString();
				      if(cents<10) {
				         cents = "0" + cents
				      }
				      for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
				          val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
				      }

				      return (((sign)?'':'-') + val + '.' + cents);
					  }

			  },
			 mouted:function(){
				  console.log(this.otherMessage)
			  }
			})
		 //跳转墨盒详情页
			 $("#inkDetail").click(function(){
				 window.location.href = "${ctxFront }/jiujiudevice/payinkDetail?sn=${order.deviceSn }&orderNo=${orderLog.orderNo}&r="+Math.random();
			 });
		</script>
		
	</body>

</html>